import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../base/utils/density_util.dart';
import 'category_logic.dart';

class CategoryPage extends StatelessWidget {
  const CategoryPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var id = Get.arguments;
    printInfo(info: "当前id===${id}");
    final logic = Get.find<CategoryLogic>();
    logic.onInit();

    // return Scaffold(
    //   body: CustomScrollView(
    //     controller: logic.scrollController,
    //     slivers: <Widget>[
    //       SliverAppBar(
    //         pinned: false,
    //
    //         ///这个是高度
    //         expandedHeight: 300.0,
    //         leading: Icon(Icons.arrow_back),
    //         flexibleSpace: FlexibleSpaceBar(
    //           title: Text(""),
    //           background: Image.network(
    //             'https://i.loli.net/2020/08/09/l9Ea5uKpTDLvfG6.jpg',
    //             width: double.infinity,
    //             fit: BoxFit.fill,
    //           ),
    //         ),
    //       ),
    //       SliverAppBar(
    //         pinned: true,
    //
    //         ///这个是高度
    //         expandedHeight: 300.0,
    //         leading: Icon(Icons.arrow_back),
    //         flexibleSpace: FlexibleSpaceBar(
    //           title: Container(
    //             child: TabBar(
    //               tabs: <Tab>[
    //                 Tab(
    //                   text: logic.titles[0],
    //                 ),
    //                 Tab(
    //                   text: logic.titles[1],
    //                 ),
    //                 Tab(
    //                   text: logic.titles[2],
    //                 ),
    //                 Tab(
    //                   text: logic.titles[0],
    //                 ),
    //                 Tab(
    //                   text: logic.titles[0],
    //                 ),
    //                 Tab(
    //                   text: logic.titles[0],
    //                 ),
    //               ],
    //               indicatorColor: Colors.blue,
    //               indicatorWeight: 5.0,
    //               controller: logic.tabController,
    //               labelColor: Colors.red,
    //               unselectedLabelColor: Colors.grey,
    //               onTap: (index) {
    //                 logic.pageController.jumpToPage(index);
    //               },
    //             ),
    //           ),
    //           background: Image.network(
    //             'https://i.loli.net/2020/08/09/l9Ea5uKpTDLvfG6.jpg',
    //             width: double.infinity,
    //             fit: BoxFit.fill,
    //           ),
    //         ),
    //       ),
    //       SliverList(
    //         delegate: SliverChildBuilderDelegate((context, index) {
    //           return Container(
    //             height: 60,
    //             color: Colors.primaries[index % Colors.primaries.length],
    //           );
    //         }, childCount: 30),
    //       )
    //     ],
    //   ),
    // );

    return Scaffold(
        body: ListView(
      padding: EdgeInsets.only(top: 0),
      children: [
        Stack(
          children: [
            Positioned(
                top: 0,
                right: 0,
                left: 0,
                child: Image.asset("assets/images/home_bg.png")),
            Container(
              width: Density.instance.screenWidth,
              height: 250,
              decoration: const BoxDecoration(
                color: Colors.orange,
              ),
              child: Image.network(
                width: double.infinity,
                height: 250,
                "https://alipic.lanhuapp.com/FigmaSlicePNGc3f224aa43738b00553127f54bb77f06.png",
                fit: BoxFit.fill,
              ),
            ),
            Positioned(
              top: 44,
              left: 24,
              child: InkWell(
                onTap: () => Get.back(),
                child: const Icon(Icons.arrow_back),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 250),
              height: Density.instance.screenHeight,
              color: Colors.white,
              child: Column(
                children: [
                  Container(
                    height: 60,
                    child: TabBar(
                      tabs: const [
                        Text("全部"),
                        Text("茶叶"),
                        Text("护肤品"),
                        Text("酒类"),
                        Text("鲜花"),
                        Text("衣服"),
                      ],
                      indicatorColor: Colors.blue,
                      indicatorWeight: 2.0,
                      controller: logic.tabController,
                      labelColor: Colors.red,
                      isScrollable: true,
                      unselectedLabelColor: Colors.grey,
                      onTap: (index) {
                        printInfo(info: "当前index===${index}");
                        // logic.pageController.jumpToPage(index);
                        logic.update();
                      },
                    ),
                  ),
                  Expanded(
                    child: TabBarView(
                      controller: logic.tabController,
                      children: const <Widget>[
                        CategoryChildItem(),
                        CategoryChildItem(),
                        CategoryChildItem(),
                        CategoryChildItem(),
                        CategoryChildItem(),
                        CategoryChildItem(),
                      ],
                      // onPageChanged: (index) {
                      //   printInfo(info: "当前index===${index}");
                      //   logic.tabController.animateTo(index);
                      //   logic.update();
                      // },
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ],
    ));
  }
}

class CategoryChildItem extends StatefulWidget {
  const CategoryChildItem({Key? key}) : super(key: key);

  @override
  State<CategoryChildItem> createState() => _CategoryChildItemState();
}

class _CategoryChildItemState extends State<CategoryChildItem> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: const Color(0xFFF7F8FA),
      width: Density.instance.screenWidth,
      padding: const EdgeInsets.only(left: 12, right: 12),
      child: ListView.builder(
        padding: EdgeInsets.only(top: 0),
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (BuildContext context, int index) {
          return MychildItem();
        },
        itemCount: 10,
      ),
    );
  }
}

class MychildItem extends StatelessWidget {
  const MychildItem({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(top: 10),
      color: Colors.white,
      height: 120,
      child: Row(
        children: [
          Container(
            width: 80,
            height: 80,
            margin: const EdgeInsets.only(right: 10),
            decoration: const BoxDecoration(
              color: Colors.orange,
            ),
            child: Image.network(
              width: 80,
              height: 80,
              "https://alipic.lanhuapp.com/FigmaSlicePNGc3f224aa43738b00553127f54bb77f06.png",
              fit: BoxFit.fill,
            ),
          ),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  "法国进口品牌女生时尚经典款增亮唇色提升光泽低饱和度少...",
                  style: TextStyle(
                    color: Color(0xff000000),
                    fontSize: 18,
                  ),
                ),
                const Text(
                  "爆抢3000件...",
                  style: TextStyle(
                    color: Color(0xff999999),
                    fontSize: 12,
                  ),
                ),
                Stack(
                  children: [
                    Container(
                      height: 40,
                      width: 200,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(5),
                        // color: Colors.grey
                      ),
                      child: Image.asset(
                        height: 40,
                        width: 200,
                        "assets/images/youxuan.png",
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                    const Positioned(
                        left: 10,
                        top: 10,
                        child: Text(
                          "¥379.99",
                          style: TextStyle(
                            fontSize: 16,
                            color: Colors.white,
                          ),
                        )),
                    Positioned(
                        right: 20,
                        top: 8,
                        child: Text(
                          "抢购",
                          style: TextStyle(
                            fontSize: 16,
                            color: Color(0xffC21C3F),
                          ),
                        )),
                  ],
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
